<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合型网站布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        ul,ol { list-style: none;}
        header {
            height: 58px;
            background-color: #fff;
            padding-left: 60px;
        }
        nav a.logo {
            display: block;
            float: left;
            font-size: 20px;
            font-family: "黑体";
            padding-left: 35px;
            height: 58px;
            line-height: 58px;
            background: url(images/task-7/nav_book.png) no-repeat left center;
            color: #000;
        }
        .clearfix:after,
        .clearfix:before {
            content: '';
            display: table;
            overflow: auto;
            clear: both;
        }
        .clearfix {
            zoom: 1;
        }
        nav ul {
            float: right;
        }
        nav ul li {
            display: inline-block;
        }
        nav li a {
            display: block;
            font-size: 14px;
            font-family: "微软雅黑";
            padding: 0 15px;
            text-align: center;
            color: #999CA2;
            line-height: 53px;
            margin-left: 10px;
        }
        nav li a.active {
            border-bottom: 5px solid #E74F4D;
            color: #E74F4D;
        }
        nav li a:hover {
            color: #E74F4D;
        }
        nav .login {
            padding-left: 20px;
            background: url(images/task-7/nav_icon.png) no-repeat left center;
            color: #E74F4D;
        }
        /*=====
         * banner
        =========*/
        .container {
            width: 100%;
        }
        .container .banner {
            background: url(images/task-7/banner_t.gif) no-repeat;
            background-size: 100%;
            min-height: 467px;
            /*height: 467px;*/
            padding-top: 223px;
            padding-left: 114px;
        }
        .banner h2 {
            height: 72px;
            font-size: 60px;
            font-family: "微软雅黑";
            color: #fff;
            margin-bottom: 20px;
        }
        .banner p {
            font-size: 21px;
            font-family: "微软雅黑";
            color: #fff;
            line-height: 30px;
            width: 320px;
            margin-bottom: 60px;
        }
        .banner button {
            width: 330px;
            height: 65px;
            line-height: 65px;
            background-color: #E74F4D;
            border: none;
            outline: none;
            color: #fff;
            font-size: 30px;
            font-family: "微软雅黑";
            text-align: center;
            cursor: pointer;
        }
        .target .item {
            padding-top: 45px;
            width: 24.5%;
            display: inline-block;
            height: 205px;
            text-align: center;
        }
        .target .item .icon {
            display: block;
            margin: 0 auto;
            width: 42px;
            height: 42px;
            background: url(images/task-7/baxin.gif) no-repeat center center;
        }
        .target .item .icon-hq {
            background: url(images/task-7/hongqi.gif) no-repeat center center;
        }
        .target .item .icon-flower {
            background: url(images/task-7/xiaohua.gif) no-repeat center center;
        }
        .target .item .icon-fk {
            background: url(images/task-7/gezi.gif) no-repeat center center;
        }
        .target .item p {
            width: 158px;
            height: 50px;
            color: #989999;
            font-size: 14px;
            font-family: "黑体";
            margin: 0 auto;
            margin-top: 43px;
            position: relative;
        }
        .target .item p::after {
            content: '';
            height: 50px;
            width: 2px;
            background-color: #989999;
            position: absolute;
            top: 0;
            right: -85px;
        }
        .target .item:last-child p::after {
            display: none;
        }
        /******
        * 新世界
        ********/
        .about-nw {
            background-color: #EDECEC;
            height: 270px;
            padding-top: 90px;
        }
        .about-nw h3 {
            text-align: center;
            margin-bottom: 44px;
        }
        .about-nw h3 img {
            display: inline-block;
            width: 91px;
            height: 92px;  
        }
        .about-nw p {
            font-size: 54px;
            font-family: "黑体";
            color: #909090;
            text-align: center;
        }
        /*
        * map 部分
        */
        .map {
            min-width: 1255px;
            height: 340px;
            background: url(images/task-7/map.gif) no-repeat;
            background-size: 100%;
        }
        .map h3 {
            font-size: 21px;
            font-family: "微软雅黑";
            color: #F4F0ED;
            text-align: center;
            position: relative;
            margin-bottom: 26px;
            padding-top: 50px;
        }
        .map h3::after {
            content: '';
            width: 31px;
            height: 3px;
            background-color: #F4F0ED;
            position: absolute;
            top: 85px;
            left: 50%;
            margin-left: -15px;
        }
        .map p {
            height: 19px;
            line-height: 19px;
            color: #F4F0ED;
            font-size: 12px;
            text-align: center;
            margin-bottom: 47px;
        }
        .map .city-input {
            text-align: center;
        }
        .map .city-input input {
            display: inline-block;
            width: 196px;
            height: 36px;
            border: none;
            outline: none;
            font-size: 12px;
            color: #A8AAAA;
            margin-right: 28px;
            padding-right: 27px;
            padding-left: 13px;
            background: url(images/task-7/mail.gif) no-repeat 210px center #fff;
        }
        .map .city-input button {
            width: 236px;
            height: 36px;
            text-align: center;
            color: #EDECEC;
            font-size: 14px;
            font-family: "微软雅黑";
            letter-spacing: 10px;
            background-color: #BE4E48;
            border: none;
            outline: none;
        }
        .pic-li {
            height: 605px;
            background-color: #F7F7F7;
        }
        .pic-li ul {
            width: 985px;
            padding-top: 100px;
            margin: 0 auto;
        }
        .pic-li ul li {
            float: left;
            text-align: center;
            margin-right: 36px;
        }
        .pic-li ul li:last-child {
            margin-right: 0;
        }
        .pic-li ul li a {
            display: block;
        }
        .pic-li li a img {
            display: block
        }
        .pic-li ul li em {
            display: block;
            font-style: normal;
            font-size: 14px;
            font-family: "微软雅黑";
            color: #000;
            line-height: 28px;
        }
        .pic-li ul li .sh {
            font-size: 22px;
            letter-spacing: 26px;
            text-align: right;
        }
        .pic-li ul li span {
            font-size: 12px;
            color: #A8AAAA;
            line-height: 27px;
        }
        /*
        * slider 部件
        */
        .slider .imgwrap {
            float: left;
            width: 850px;
            height: 566px;
            background: url(images/task-7/newword.gif) no-repeat center center;
            position: relative;
            text-align: center;
        }
        .slider .imgwrap::after {
            content: '';
            width: 0;
            height: 0;
            border-right: 26px solid #fff;
            /*border-right-color: transparent; */
            border-left-color: transparent;
            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -16px;
        }
        .imgwrap p:first-child {
            padding-top: 128px;
            height: 60px;
            font-size: 50px;
            font-family: "微软雅黑";
            color: #fff;
        }
        .imgwrap h2 {
            font-size: 158px;
            color: #fff;
            font-family: "微软雅黑";
            height: 181px;
            margin-top: -20px;
        }
        .imgwrap .cont {
            font-size: 22px;
            font-family: "微软雅黑";
            color: #fff;
            margin-top: 10px;
        }
        .slider {
            min-width: 1343px;
        }
        .slider .content {
            float: left;
            width: 356px;
            height: 567px;
            padding: 0 68px;
        }
        .slider .content h3 {
            padding-top: 158px;
            padding-bottom: 28px;
            text-align: center;  
            font-size: 20px;
            color: #323333;  
        }
        .slider .content span {
            color: #E74F4D;
        }
        .slider .content p {
            font-size: 12px;
            color: #AAAAA9;
            font-family: "宋体";
            line-height: 27px;
            margin-bottom: 40px;
        }
        .more {
            display: block;
            font-family: "微软雅黑";
            color: #E25C5F;
            text-align: center;
            border: 1px solid #E25C5F;
            margin: 0 auto;
        }
        .slider .content a.more {
            font-size: 12px;
            width: 107px;
            height: 35px;
            line-height: 35px;
        }
        .slider .pagin {
            margin-top: 30px;
            text-align: center;
        }
        .slider .dian {
            display: inline-block;
            margin: 0 8px;
            width: 11px;
            height: 11px;
            border: 1px solid #929293;
            border-radius: 50%;
            background-color: #fff;
        }
        .slider .pagin i.active {
            background-color: #929293;
        }
        /*
        * 新时代
        */
        .xsd-us {
            width: 100%;
        }
        .xsd-us .item {
            width: 33.3%;
            height: 520px;
            float: left;
        }
        .xsd-us .one {
            background-color: #E74F4D;
        }
        .xsd-us .one h3,
        .xsd-us .two h3 {
            padding-top: 170px;
            font-size: 21px;
            font-family: "黑体";
            color: #fff;
            text-align: center;
            font-weight: normal;
        }
        .xsd-us .one p,
        .xsd-us .two p {
            font-size: 21px;
            font-family: "黑体";
            color: #fff;
            text-align: center;
            margin-top: 10px;
            position: relative;
        }
        .xsd-us .one p::after,
        .xsd-us .two p::after {
            content: '';
            width: 31px;
            height: 3px;
            background-color: #fff;
            position: absolute;
            top: 45px;
            left: 50%;
            margin-left: -16px;
        }
        .xsd-us .one a,
        .xsd-us .two a {
            width: 170px;
            height: 44px;
            color: #F7F7F7;
            border: 1px solid #F7F7F7;
            line-height: 44px;
            margin-top: 48px;
        }
        .xsd-us .two {
            background-color: #fff;
        }
        .xsd-us .two h3,
        .xsd-us .two p {
            color: #000;
        }
        .xsd-us .two p::after {
            background-color: #ABAAAA;
        }
        .xsd-us .two a {
            color: #E74F4D;
            border-color: #E74F4D;
        }
        .xsd-us .last {
            position: relative;
            background: url(images/task-7/meinv.gif) no-repeat center center;
        }
        .xsd-us .last::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 26px solid #fff;
            border-right-color: transparent; 
            /*border-left-color: transparent;*/
            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
            position: absolute;
            top: 50%;
            left: 9px;
            margin-top: -16px;
            z-index: 3;
        }
        .join-us {
            height: 750px;
        }
        .join-us h2 {
            padding-top: 115px;    
            font-size: 21px;
            font-family: "黑体";
            color: #323232;
            margin-bottom: 20px;
            position: relative;
            text-align: center;
        }
        .join-us h2::after {
            content: '';
            width: 30px;
            height: 2px;
            background-color: #E25C5F;
            position: absolute;
            top: 145px;
            left: 50%;
            margin-left: -15px;
        }
        .join-us p {
            width: 424px;
            font-size: 12px;
            font-family: "微软雅黑";
            text-align: center;
            margin: 0 auto;
            line-height: 17px;
            color: #AAAAA9;
            margin-bottom: 100px;
        }
        .join-us .content {
            width: 1025px;
            margin: 0 auto;
        }
        .join-us .content dl {
            width: 292px;
            padding-right: 65px;
            float: left;
        }
        .join-us .content dl dt {
            font-size: 14px;
            font-family: "黑体";
            color: #221814;
            margin-bottom: 20px;
        }
        .join-us .content dl dd {
            font-size: 12px;
            font-family: "宋体";
            color: #8B8684;
            width: 292px;
            height: 38px;
            line-height: 20px;
        }
        .join-us .content dl .m a {
            float: right;
            width: 28px;
            height: 17px;
            line-height: 17px;
            padding-left: 20px;
            background: url(images/task-7/jiantou.gif) no-repeat left center;
            color: #8B8684;
        }
        .join-us .form {
            float: left;
        }
        .join-us .content .form input {
            display: inline-block;
            width: 296px;
            height: 40px;
            line-height: 40px;
            border: none;
            outline: none;
            margin-right: 15px;
            background-color: #EDEDEE;
            font-size: 12px;
            font-family: "宋体";
            color: #9C9897;
            margin-bottom: 10px;
            padding-left: 14px;
        }
        .join-us .content .form textarea {
            width: 620px;
            height: 111px;
            background-color: #EDEDEE;
            border: none;
            outline: none;
            margin-bottom: 10px;
            color: #888281;
            padding: 5px 10px;
            resize: none;
        }
        .join-us .content .form input:last-child {
            width: 639px;
        }
        .contact-us {
            height: 360px;
            background-color: #33363F;
        }
        .contact-us h2 {
            padding-top: 88px;
            font-size: 21px;
            text-align: center;
            font-family: "黑体";
            color: #fff;
            margin-bottom: 10px;
        }
        .contact-us p {
            font-size: 12px;
            width: 472px;
            margin: 0 auto;
            color: #B3B4B7;
            text-align: center;
            line-height: 17px;
            margin-bottom: 25px;
        }
        .contact-us .submit {
            text-align: center;
        }
        .submit input {
            display: inline-block;
            width: 425px;
            height: 39px;
            line-height: 39px;
            padding-left: 5px;
            border: none;
            outline: none;
            font-size: 14px;
            font-family: "微软雅黑";
        }
        .submit button {
            display: inline-block;
            font-size: 15px;
            border: none;
            outline: none;
            width: 81px;
            height: 39px;
            background-color: #6F7278;
            color: #fff;
            letter-spacing: 5px;
            margin-bottom: 36px;
        }
        .contact-us ul {
            text-align: center;
        }
        .contact-us ul li {
            display: inline-block;
            margin: 0 10px;
        }
        .contact-us li .icon {
            display: block;
            width: 30px;
            height: 30px;
        }
        .contact-us li .icon-qq {
            background: url(images/task-7/qq.gif) no-repeat center center;
        }
        .contact-us li .icon-wb {
            background: url(images/task-7/weibo.gif) no-repeat center center;
        }
        .contact-us li .icon-tw {
            background: url(images/task-7/twitter.gif) no-repeat center center;
        }
        .contact-us li .icon-br {
            background: url(images/task-7/google.gif) no-repeat center center;
        }
        /* footer */
        footer {
            height: 31px;
            padding: 28px 97px 0px 97px;
            background-color: #2F2F38;
        }
        footer span,
        footer span:last-child a {
            font-size: 12px;
            font-family: "宋体";
            color: #D9D9DA;
        }
        footer span:last-child a {
            float: right;
        }
    </style>
</head>
<body>
    <header class="clearfix">
        <nav>
            <a class="logo" href="#">新世界</a>
            <ul>
                <li><a class="active" href="#">首页</a></li>
                <li><a href="#">最新活动</a></li>
                <li><a href="#">项目介绍</a></li>
                <li><a href="#">爱心社区</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a class="login" href="#">登录</a></li>
            </ul>
        </nav>
    </header>
    
    <div class="container">
        <section class="banner">
            <h2>Time of new life</h2>
            <p>新时代，年轻的人们让我们生活在一起，体验新生活，享受新生活</p>
            <button type="button">开始体验</button>
        </section>
        <section class="target">
            <div class="item">
                <span class="icon icon-circle"></span>
                <p>打造全新的世界观，让你更爱你的生活</p>
            </div>
            <div class="item">
                <span class="icon icon-hq"></span>
                <p>丰富多彩的公益活动，发挥新世界的主人公意识</p>
            </div>
            <div class="item">
                <span class="icon icon-flower"></span>
                <p>时尚的新理念，超前体验未知的生活</p>
            </div>
            <div class="item">
                <span class="icon icon-fk"></span>
                <p>完善的培养机制，培养你全新的世界观</p>
            </div>
        </section>
        <section class="about-nw">
            <h3><img src="images/task-7/bigbook.gif" alt="书"></h3>
            <p>关于新世界，你不知道的还有什么？</p>
        </section>
        <section class="map">
            <h3>查找新世界城市活动信息</h3>
            <p>每个城市都有不同的活动信息，请自主查询您所需要了解的城市</p>
            <div class="city-input">
                <input type="text" name="" value="中国">
                <input type="text" name="" value="省份">
                <input type="text" name="" value="城市">
                <button type="button">搜索</button>
            </div>
        </section>
        <section class="pic-li">
            <ul class="clearfix">
                <li>
                    <a href="#">
                        <img src="images/task-7/pic01.gif" alt="图片1">
                        <em>北京活动</em>
                        <span>新社区大联盟</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="sh">上海活动</em>
                        <span>夜上海新景观探索</span>
                        <img src="images/task-7/pic02.gif" alt="图片1">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/task-7/pic03.gif" alt="图片1">
                        <em>深圳活动</em>
                        <span>全新海岸线观点站</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/task-7/pic04.gif" alt="图片1">
                        <em>香港活动</em>
                        <span>奢侈消费大派送</span>
                    </a>
                </li>
            </ul>
        </section>
        <section class="slider clearfix">
            <div class="imgwrap">
                <p>新世界</p>
                <h2>TIME</h2>
                <p class="cont">@新世界 - 北京</p>
                <p class="cont">2017-01-01</p>
            </div>
            <div class="content">
                 <h3>新世界/<span>01</span></h3>
                 <p>新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界世界新世界新世界新世界新世界新世界新世界世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界</p>
                <a href="#" class="more">更多详情</a>
                <div class="pagin"><i class="dian active"></i><i class="dian"></i><i class="dian"></i></div>
            </div>
        </section>
        <section class="xsd-us clearfix">
            <div class="item one">
                <h3>新时代</h3>
                <p>关于爱生活的我们</p>
                <div class="line"></div>
                <a href="#" class="more">查看更多</a>
            </div>
            <div class="item two">
                <h3>新时代</h3>
                <p>关于爱生活的我们</p>
                <div class="line"></div>
                <a href="#" class="more">查看更多</a>
            </div>
            <div class="item last">
                
            </div>
        </section>
        <section class="join-us">
            <h2>成为我们的志愿者</h2>
            <p>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
            <div class="content clearfix">
                <dl>
                    <dt>新世界志愿者协议</dt>
                    <dd>加入新世界志愿者的人员必须准守中华人民共和国的相关法律法规，并且本着平等自愿的原则......</dd>
                    <dd class="m"><a href="#">more</a></dd>
                    <dt>新世界志愿者协议</dt>
                    <dd>加入新世界志愿者的人员必须准守中华人民共和国的相关法律法规，并且本着平等自愿的原则......</dd>
                    <dd class="m"><a href="#">more</a></dd>
                    <dt>更多条款</dt>
                    <dd class="m"><a href="#">more</a></dd>
                </dl>
                <div class="form">
                    <input type="text" placeholder="姓名：">
                    <input type="text" placeholder="年龄："> <br>
                    <input type="text" placeholder="联系方式：">
                    <input type="text" placeholder="联系地址："> <br>
                    <textarea rows="5" cols="10" placeholder="请简单描述你梦想的生活。"></textarea> <br>
                    <input type="submit" value="提交申请">
                </div>
            </div>
        </section>
        <section class="contact-us">
            <h2>联系我们</h2>
            <p>为了更好的获取我们的最新的产品咨询，您可以留下您的电子邮箱快速订阅我们的产品资讯也可以通过以下任何方式关注我们动态</p>
            <div class="submit">
                <input type="text" placeholder="someone@email.com"><button type="button">提交</button>
            </div>
            <ul>
                <li><a class="icon icon-qq"></a></li>
                <li><a class="icon icon-wb"></a></li>
                <li><a class="icon icon-tw"></a></li>
                <li><a class="icon icon-br"></a></li>
            </ul>
        </section>
    </div>

    <footer>
        <span>@2017新世界</span>
        <span><a href="#">Back to top</a></span>
    </footer>
</body>
</html>